import React, { Component } from 'react';
import { withRouter } from "react-router-dom"  //高阶组件  用于路由跳转
import { GoodList } from "../../api/allgoods"
import { Empty } from 'antd-mobile'
import { SearchSearchKey } from "../../api/search";
import "../../styles/allgoods/MyList.css"

class MyList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodsList: [],
        }
    }


    async componentDidMount() {
        // console.log(typeof this.props.location.state.id);
        // console.log(this.props.location.state.id);
        if (typeof this.props.location.state.id == "number") {
            // console.log("分类组件传过来的id"+this.props.location.state.id);
            // 第一次从首页跳转过来是也传过来了一个固定id,确保第一次跳转时有东西渲染
            var res = await GoodList({ id: this.props.location.state.id })
            console.log(res.data.list);
            this.setState({ goodsList: res.data.list })
        } else {
            // 从搜索页传过来的关键词this.props.location.state.searchkey
            var res2 = await SearchSearchKey({ searchkey: this.props.location.state.searchkey })
            console.log(res2.data.list);
            if (res2.data.list.length) {
                this.setState({ goodsList: res2.data.list })
            } else {

            }


        }


    }

    goDetails(id) {
        console.log("商品详情页的id" + id);
        this.props.history.push({ pathname: "/details", state: { id: id } })
    }

    render() {
        return (
            <div>
                <div className='allgoodslist'>
                    {
                        this.state.goodsList &&
                            this.state.goodsList.length ?
                            this.state.goodsList.map((item, index) => {
                                return (<div className='goodslist' key={index} onClick={() => { this.goDetails(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <p className='name'>{item.name}</p>
                                    <p className='Yuanprice'>原价¥100</p>
                                    <p className='HuoDongprice'>活动价¥<span>{item.salesPrice.value}</span></p>
                                </div>)
                            })
                            :
                            <div>
                                <Empty
                                    style={{ padding: '64px 0' }}
                                    imageStyle={{ width: 128 }}
                                    description='没有找到相关商品'
                                />
                            </div>
                    }
                </div>
                <div className='down'></div>
            </div>

        );
    }
}

export default withRouter(MyList);